<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <!-- <el-form-item prop="factoryDeptCode">
        <organizationSelect v-model="queryParams.factoryDeptCode" :onlyFactory="true"></organizationSelect>
      </el-form-item> -->

      <el-form-item>
        <organizationCascader
          :clearable="false"
          :arrData="queryParams"
          :showData="{
            factory:true,
            workshop:true
          }"
          :isAllList="true"
          @change="change"
        ></organizationCascader>
      </el-form-item>

      <el-form-item prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入关键字"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 44px - 50px)"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" width="80" align="center">
        <template slot-scope="scope">
          <span>{{
            utils.tableSerialNumber(scope, pager.pageNum, pager.pageSize)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班组编码" prop="erpWorkGroup">
        <template slot-scope="{row}">
          <el-button type="text" @click.stop="handleUpdate(row,'look')">{{row.erpWorkGroup}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="班组名称" prop="erpWorkGroupDesc"></el-table-column>
      <el-table-column label="班次类型" prop="classesCode">
        <template slot-scope="scope">
          <span>{{scope.row.classesDto && scope.row.classesDto.classesName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" prop="groupHeadRealnames"> </el-table-column>
      <el-table-column label="工厂组织名称" prop="erpOrganizationName"> </el-table-column>
      <el-table-column label="所属车间" prop="workshopDto">
        <template slot-scope="{row}">
          {{ row.workshopDto ? row.workshopDto.workshopName || "" : "" }}
        </template>
      </el-table-column>
      <el-table-column label="所属产线" prop="erpGroupLineDtos">
        <template slot-scope="{row}">
          {{ getLineNames(row) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button v-hasPermi="['teamMgmt:group:edit']" type="text" @click.stop="handleUpdate(row,'edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <DetailDialog
      :visible.sync="detailDialog.visible"
      :row="detailDialog.row"
      :mode="detailDialog.mode"
      @submit-success="getList">
    </DetailDialog>
  </div>
</template>
<script>
  import organizationCascader from "@/views/components/organizationCascader";
import {
  listErpGroup} from "@/api/team/group";
import DetailDialog from "./detailDialog";
import organizationSelect from "@/views/components/organizationSelect";
export default {
  name: "Group",
  components: { DetailDialog,organizationSelect,organizationCascader },
  data() {
    return {
      queryParams: {
        searchValue: "",
        factoryDeptCode:"",
        workshopId:"",
        workshopCode:""
      },
      list: [],
      single: null,
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      detailDialog: {
        mode:"look",
        visible: false,
        row: null
      }
    };
  },
  created() {
    //获取列表数据
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.workshopId = result[1]?.workshopId;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.single = null;
      const { pageNum, pageSize } = this.pager
      const {searchValue,factoryDeptCode,workshopId} = this.queryParams
      const params = {
        query:{
          searchValue,
          factoryDeptCode,
          workshopId
        },
        pageNum,
        pageSize
      }
      listErpGroup(params)
      .then(response => {
        if (response.code == 200) {
          this.list = response.rows || [];
          this.pager.total = response.total;
        } else {
          this.list = []
          this.pager.total = 0
        }
        this.loading = false;
      }).catch(() => {
        this.list = []
        this.pager.total = 0
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.single = false;
      } else if (selection.length == 1) {
        this.single = true;
      } else {
        this.single = null;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pager.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.factoryDeptCode = null;
      this.queryParams.workshopId = null;
      this.queryParams.workshopCode = null;
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleUpdate(row,mode) {
      this.detailDialog.mode = mode;
      this.detailDialog.row = row;
      this.detailDialog.visible = true;
    },

    change({factoryDeptCode,workshopId}){
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.workshopId = workshopId;
    },
    getLineNames(row) {
      if (!row?.erpGroupLineDtos?.length) {
        return ""
      }
      const strs = row.erpGroupLineDtos.map(l => l.productionLineDto?.erpProductionLineName || "" ).join(",")
      return strs
    }
  },
};
</script>
<style lang="scss" scoped>
.top {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  ::v-deep .el-form-item__content{
    line-height: 0;
  }
}
.pagination-container {
  margin: 0;
}
</style>
